<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-26 15:32:36
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-11-29 14:36:04
 * @FilePath: \school-shop-vue\components\my-returnorderlist\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <view class="page-top flex-row-between">
      <text class="page-top-title">退货单号：{{ item.order_sn }}</text>
      <text
        class="page-top-state audit"
        :style="{ '--color': (colorItem(item.status) || {}).color || '#000' }"
        >{{ filterState(item.status) }}</text
      >
    </view>
    <view class="page-content">
      <!-- 供应商图标 -->
      <view
        class="page-content-gongyingshang flex-row-start"
        @click="itemns.stop(item)"
      >
        <image class="logo" :src="item.company_info.site_logo"></image>
        <text class="logo-title">{{ item.company_info.site_title }}</text>
        <image class="img" src="../../static/images/right.png" />
      </view>
      <!-- 商品信息 -->
      <view class="shopBox flex-row-between">
        <view class="shopBox-title">
          <image class="image" :src="item.img"></image>
          <view class="name">
            <view>{{ item.goods_name || "商品名称" }}</view>
            <!-- <view>
              <text>规格：1kg/份</text>
              <text>数量：2份</text>
            </view> -->
          </view>
        </view>
        <!-- <view class="shopBox-images">
          <image class="image" v-for="(item, index) in 1" :key="index" :src='item'></image>
        </view> -->
        <view class="shopBox-statistics flex-column-between">
          <view class="shopBox-statistics-top flex-row-end">
            <!-- <text class="shopBox-statistics-top-num">共1件</text> -->
            <!-- <uni-icons type="forward" size="12"></uni-icons> -->
          </view>
          <view class="shopBox-statistics-bottom flex-column-start">
            <text class="apply">申请金额:￥{{ item.apply_money }}</text>
            <text class="withdrawal"
              ><text>实退金额:</text><text style="color: #d75131">￥</text
              ><text style="font-size: 32rpx; color: #d75131">{{
                item.real_money
              }}</text></text
            >
          </view>
        </view>
      </view>
      <view class="operate flex-row-between">
        <view class="operate-left flex-column-start">
          <text>申请日期：{{ filterDate(item.created_at * 1000) }}</text>
          <text style="margin-top: 15rpx"
            >审核日期：{{
              filterDate(item.check_time * 1000) || "待审核"
            }}</text
          >
        </view>
        <view
          v-if="item.status == 0"
          class="operate-right"
          @click.stop="clickbtn('cancelOrderReturn', item.id, '取消订单')"
          :style="{ '--color': colorItem(item.status).color }"
          >{{ colorItem(item.status).name }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["item", "tabIndex"],
  data() {
    return {
      logo: "",
      showLogo: 0,
      stateList: [
        { name: "待审核", status: 0 },
        { name: "待退款", status: 1 },
        { name: "已完成", status: 3 },
        { name: "已取消", status: 4 },
      ],
      colorList: [
        { name: "取消退货", color: "#F55726", status: 0 },
        { status: 1, color: "#F55726" },
        { status: 3, color: "#40AE36" },
        { status: 4, color: "#000" },
      ],
    };
  },

  // onLoad() {
  //   console.log("item", item);
  // },
  mounted() {
    this.logo = uni.getStorageSync("logo");
    this.showLogo = uni.getStorageSync("showLogo");
  },
  computed: {},
  methods: {
    itemns(p) {
      // console.log("p", p);

      let info = this.$store.state.companyData.find(
        (item) => item.supplier_id == p.company_id
      );
      this.$store.commit("changeCompanyInfo", info);
      uni.switchTab({
        url: "/pages/shop/index",
      });
    },

    ble() {
      console.log("item", this.item);
    },

    clickbtn(type, id, msg) {
      // console.log(type, id, msg);
      this.$emit("clickbtn", { type, id, msg });
    },
    filterState(status) {
      console.log(status,this.stateList.find((item) => item.status == status));
      return this.stateList.find((item) => item.status == status).name;
    },

    filterDate(time) {
      if (time) {
        return new Date(time).toLocaleDateString().replaceAll("/", "-");
      }
    },
    colorItem(status) {
      return this.colorList.find((item) => item.status == status);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
.page {
  width: 100%;
  height: 100%;

  &-top {
    width: 100%;
    align-items: center;
    border-bottom: 1rpx solid #ececec;
    padding-bottom: 29rpx;
    &-title {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    &-state {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .audit {
      color: var(--color);
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    &-gongyingshang {
      margin-top: 25rpx;
      position: relative;

      .logo {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50% 50%;
        background: #999999;
      }
      .logo-title {
        margin-left: 10rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .img {
        width: 24rpx;
        height: 24rpx;
        position: relative;
        top: 6rpx;
        left: 4rpx;
      }
    }

    .shopBox {
      width: 100%;
      margin-top: 23rpx;
      position: relative;
      &-title {
        display: flex;
        .image {
          width: 130rpx;
          height: 130rpx;
          border-radius: 16rpx;
        }
        .name {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 26rpx;
          font-family: PingFang SC;
          color: #333333;
          view:nth-child(2) {
            font-size: 22rpx;
            color: #999999;
            display: flex;
            flex-direction: column;
          }
        }
      }
      &-images {
        display: grid;
        grid-template-columns: repeat(4, 130rpx);
        grid-template-rows: 130rpx;
        grid-gap: 20rpx;
        .image {
          width: 130rpx;
          height: 130rpx;
          border-radius: 16rpx;
        }
      }
      &-statistics {
        width: 320rpx;
        height: 160rpx;
        position: absolute;
        top: -15rpx;
        right: -30rpx;
        background: rgba($color: #fff, $alpha: 0.8);
        box-sizing: border-box;
        padding: 17rpx 43rpx;
        &-top {
          align-items: center;
          width: 100%;

          &-num {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
        }
        &-bottom {
          align-items: flex-end;
          width: 100%;
          .apply {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
          }
          .withdrawal {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
        }
      }
    }

    .operate {
      align-items: center;
      width: 100%;
      margin-top: 44rpx;
      &-left {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      &-right {
        width: 140rpx;
        height: 58rpx;
        border: 1rpx solid var(--color);
        border-radius: 28rpx;
        text-align: center;
        line-height: 58rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: var(--color);
      }
    }
  }
}
</style>
